<template>
  <lay-exception :status="props.status" :title="props.title" :describe="props.describe">
    <template #extra>
      <lay-button type="primary" @click="back">返回首页</lay-button>
    </template>
  </lay-exception>
</template>

<script setup>
import { onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";

// const props = withDefaults(defineProps, { src: "" });
const props = defineProps(
  {
    src: {
      type: String,
      default: "",
    },
    status: {
      type: Number,
      default: 404,
    },
    title: {
      type: String,
      default: "404",
    },
    describe: {
      type: String,
      default: "抱歉，你访问的页面不存在",
    },
  }
)

const router = useRouter();

const countDownTime = ref(5);
let timer;

onMounted(() => {
  onCountDownTime();
});

onBeforeUnmount(() => {
  clearInterval(timer);
});

const back = () => {
  router.back();
};

//倒计时
const onCountDownTime = () => {
  timer = setInterval(() => {
    if (countDownTime.value) {
      countDownTime.value--;
    } else {
      clearInterval(timer);
    }
  }, 1000);
};
</script>

<style lang="less" scoped></style>
